﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Layui/layui-v2.2.3/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Layui/layui-v2.2.3/layui/css/modules/laydate/default/laydate.css" rel="stylesheet" />
    <script src="~/Layui/layui-v2.2.3/layui/layui.js"></script>
    <script src="~/Layui/layui-v2.2.3/layui/layui.all.js"></script>
    <script src="~/Areas/Sprintzwl/Pattern/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Areas/Sprintzwl/highchart/highcharts.js"></script>
    <script src="~/Areas/Sprintzwl/highchart/highcharts-more.js"></script>
    <script src="~/Areas/Sprintzwl/highchart/modules/exporting.js"></script>
    <script src="~/Areas/Sprintzwl/highchart/modules/funnel.js"></script>
    <script src="~/Areas/Sprintzwl/highchart/highcharts.src.js"></script>
    <script src="~/Areas/Sprintzwl/highchart/highcharts.src.js"></script>
   
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
   
    
   
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
   
    @*最近12个月的情况*@
    <div class="layui-tab layui-tab-card">
        
        <ul class="layui-tab-title">
            <li class="layui-this">新客户</li>
            <li>签约数</li>
            <li>签约额</li>
            <li>回款</li>
            <li>退款</li>
            <li>费用</li>
        </ul>
      @*折现图*@
        <div class="layui-tab-content" style="height: 500px;">
          
            <div class="layui-tab-item layui-show">
            <div id="container1" style="max-width:800px;height:400px; margin:0 auto; margin-left:80px;"></div></div>
            <div class="layui-tab-item">
                <div id="container2" style="max-width:800px;height:400px; margin:0 auto; margin-left:80px;"></div>
            </div>
            <div class="layui-tab-item">
                <div id="container3" style="max-width:800px;height:400px; margin:0 auto; margin-left:80px;"></div>
            </div>
            <div class="layui-tab-item">
                <div id="container4" style="max-width:800px;height:400px; margin:0 auto; margin-left:80px;"></div>
            </div>
            <div class="layui-tab-item">
                <div id="container5" style="max-width:800px;height:400px; margin:0 auto; margin-left:80px;"></div>
            </div>
            <div class="layui-tab-item">
                <div id="container6" style="max-width:800px;height:400px; margin:0 auto; margin-left:80px;"></div>
            </div>
        </div>
    </div>
    @*工作代办/提醒*@
    <div class="layui-tab layui-tab-card">

        <ul class="layui-tab-title">
            <li class="layui-this">应收款</li>
            <li>回款计划</li>
            <li>合同</li>
            <li>生日提醒</li>
            <li>日程</li>
            <li>待办任务</li>
        </ul>

        <div class="layui-tab-content" style="height: 200px; width:500px;">

            <div class="layui-tab-item  layui-show">
                <p>应收款算法：合约金额</p>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab layui-tab-card">

                    <ul class="layui-tab-title">
                        <li class="layui-this">今天</li>
                        <li>三日内</li>
                        <li>一周内</li>
                        <li>半月内</li>
                        <li>一月内</li>
                       
                    </ul>

                    <div class="layui-tab-content" style="height: 70px;">
                        
                        <div class="layui-tab-item  layui-show">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                       
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab layui-tab-card">

                    <ul class="layui-tab-title">
                        <li class="layui-this">今天</li>
                        <li>三日内</li>
                        <li>一周内</li>
                        <li>半月内</li>
                        <li>一月内</li>

                    </ul>

                    <div class="layui-tab-content" style="height: 70px;">

                        <div class="layui-tab-item  layui-show">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab layui-tab-card">

                    <ul class="layui-tab-title">
                        <li class="layui-this">今天</li>
                        <li>三日内</li>
                        <li>一周内</li>
                        <li>半月内</li>
                        <li>一月内</li>

                    </ul>

                    <div class="layui-tab-content" style="height: 70px;">

                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab layui-tab-card">

                    <ul class="layui-tab-title">
                        <li class="layui-this">今天</li>
                        <li>三日内</li>
                        <li>一周内</li>
                        <li>半月内</li>
                        <li>一月内</li>

                    </ul>

                    <div class="layui-tab-content" style="height: 70px;">

                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab layui-tab-card">

                    <ul class="layui-tab-title">
                        <li class="layui-this">今天</li>
                        <li>三日内</li>
                        <li>一周内</li>
                        <li>半月内</li>
                        <li>一月内</li>

                    </ul>

                    <div class="layui-tab-content" style="height: 70px; width">

                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>
                        <div class="layui-tab-item">
                            <p>共： 0 家客户，0 笔计划      总计： 0 元</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    @*梯形图*@
  
    <div class="layui-tab layui-tab-card">

        <ul class="layui-tab-title">
            <li class="layui-this">销售阶段</li>
            <li>预测</li>

        </ul>
        <div class="layui-tab-content" style="height: 500px;">
            <div class="layui-tab-item  layui-show">
                <div id="container" style=" width: 300px; height: 300px; margin: 0 auto;margin-top:50px;margin-left:80px;"></div>
            </div>
            <div class="layui-tab-item">
                @*日期*@
                ①时间范围预算：③
                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">日期范围</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="datat6" placeholder=" - " type="text">
                            </div>
                        </div>
                    </div>
                </div>
                @*下拉*@
                ②可能性
                <div class="layui-form-item">
                    <label class="layui-form-label">选择框</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value="">请选择</option>
                            <option value="0">>0%</option>
                            <option value="1">>10%</option>
                            <option value="2">>20%</option>
                            <option value="3">>30%</option>
                            <option value="4">>40%</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

            $(function () {
                $('#container').highcharts({
                    chart: {
                        type: 'funnel',
                        marginRight: 100
                    },
                    title: {
                        text: '销售',
                        x: -500
                    },
                    legend: {
                        align: 'center', //水平方向位置
                        verticalAlign: 'top', //垂直方向位置
                        x: 0, //距离x轴的距离
                        y: 20 //距离Y轴的距离
                    },
                    plotOptions: {
                        series: {
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b> ({point.y:,.0f})',
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                                softConnector: true
                            },
                            neckWidth: '30%',
                            neckHeight: '25%'
                            //-- Other available options
                            // height: pixels or percent
                            // width: pixels or percent
                        }
                    },
                    legend: {
                        enabled: true
                    },
                    series: [{
                        name: '用户',
                        data: [
                            ['初期沟通', 15654],
                            ['立项评估', 4064],
                            ['需求分析', 1987],
                            ['方案制定', 976],
                            ['招投标竞争', 846],
                            ['商务通谈判', 12],
                            ['合同签约', 80]
                        ]
                    }]
                });
            });
            //折线一
            var chart = Highcharts.chart('container1', {
                title: {
                    text: '新客户'
                },
                yAxis: {
                    title: {
                        text: '洗客户人数'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    name: '新客户人数',
                    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
                }, ],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
            //折线二
            var chart = Highcharts.chart('container2', {
                title: {
                    text: '签约数'
                },
                yAxis: {
                    title: {
                        text: '签约人数'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    name: '签约人数',
                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
                }, ],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizonta',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
            //折线三
            var chart = Highcharts.chart('container3', {
                title: {
                    text: '签约额'
                },
                yAxis: {
                    title: {
                        text: '签约款'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    name: '签约人数',
                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
                }, ],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
            //折线四
            var chart = Highcharts.chart('container4', {
                title: {
                    text: '回款'
                },
                yAxis: {
                    title: {
                        text: '回款人数'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    name: '回款人数',
                    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
                }, ],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
            //折线五
            var chart = Highcharts.chart('container5', {
                title: {
                    text: '退款数份'
                },
                yAxis: {
                    title: {
                        text: '退款人数'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    name: '退款人数',
                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
                }, ],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
            //折线6
            var chart = Highcharts.chart('container6', {
                title: {
                    text: '费用数份'
                },
                yAxis: {
                    title: {
                        text: '费用'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    name: '费用',
                    data: [13934, 92503, 87177, 69658, 97031, 519931, 237133, 154175]
                }, ],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
        </script>
</body>
</html>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;

  //…
});
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#datat6'
         , range: true
        });
    })

</script>
